<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">

<link rel="shortcut icon" href="../../dist/img/favicon.ico">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<h4>Pagination</h4>
		<div class="row">
			<div class="col-md-8">

				<div>
					<ul class="pagination">
						<li class="previous"><a href="#fakelink"
							class="fui-arrow-left"></a></li>
						<li class="active"><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
						<li><a href="#fakelink">6</a></li>
						<li><a href="#fakelink">7</a></li>
						<li><a href="#fakelink">8</a></li>
						<li><a href="#fakelink">9</a></li>
						<li><a href="#fakelink">10</a></li>
						<li class="pagination-dropdown dropup"><a href="#fakelink"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="fui-triangle-up"></i>
						</a>
							<ul class="dropdown-menu">
								<li><a href="#fakelink">10–20</a></li>
								<li><a href="#fakelink">20–30</a></li>
								<li><a href="#fakelink">40–50</a></li>
							</ul></li>
						<li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
					</ul>
				</div>

				<p class="mtl ptl">The minimal look:</p>
				<div>
					<ul class="pagination pagination-minimal">
						<li class="previous"><a href="#fakelink"
							class="fui-arrow-left"></a></li>
						<li class="active"><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
						<li><a href="#fakelink">6</a></li>
						<li><a href="#fakelink">7</a></li>
						<li><a href="#fakelink">8</a></li>
						<li><a href="#fakelink">9</a></li>
						<li><a href="#fakelink">10</a></li>
						<li class="pagination-dropdown dropup"><a href="#fakelink"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="fui-triangle-up"></i>
						</a>
							<ul class="dropdown-menu">
								<li><a href="#fakelink">10–20</a></li>
								<li><a href="#fakelink">20–30</a></li>
								<li><a href="#fakelink">40–50</a></li>
							</ul></li>
						<li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
					</ul>
				</div>

				<ul class="pagination-plain">
					<li class="previous"><a href="#fakelink">← Previous</a></li>
					<li><a href="#fakelink">1</a></li>
					<li><a href="#fakelink">2</a></li>
					<li><a href="#fakelink">3</a></li>
					<li><a href="#fakelink">4</a></li>
					<li class="active"><a href="#fakelink">5</a></li>
					<li><a href="#fakelink">6</a></li>
					<li><a href="#fakelink">7</a></li>
					<li><a href="#fakelink">8</a></li>
					<li><a href="#fakelink">9</a></li>
					<li><a href="#fakelink">10</a></li>
					<li class="next"><a href="#fakelink">Newer →</a></li>
				</ul>

				<div>
					<a href="#fakelink" class="btn btn-danger previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-danger">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-danger next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>
				<!-- /pagination -->
				<p class="mvl ptl">The various color schemes:</p>
				<div>
					<a href="#fakelink" class="btn btn-danger previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-danger">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-danger next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>
				<!-- /pagination -->

				<div>
					<a href="#fakelink" class="btn btn-success previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-success">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-success next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>
				<!-- /pagination -->

				<div>
					<a href="#fakelink" class="btn btn-warning previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-warning">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-warning next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>

				<div>
					<a href="#fakelink" class="btn btn-info previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-info">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-info next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>
				<!-- /pagination -->

				<div>
					<a href="#fakelink" class="btn btn-inverse previous"> <i
						class="fui-arrow-left"></i> OLDER
					</a>
					<ul class="pagination pagination-inverse">
						<li><a href="#fakelink">1</a></li>
						<li><a href="#fakelink">2</a></li>
						<li><a href="#fakelink">3</a></li>
						<li><a href="#fakelink">4</a></li>
						<li><a href="#fakelink">5</a></li>
					</ul>
					<a href="#fakelink" class="btn btn-inverse next"> NEWER <i
						class="fui-arrow-right"></i>
					</a>
				</div>
				<!-- /pagination -->

			</div>
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../dist/js/vendor/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../dist/js/flat-ui.min.js"></script>

	<script src="../assets/js/application.js"></script>

</body>
</html>
